<template>
	<view class="article-page">
		<view class="user-info">
			<image class="user-avatar" :src="info.author.avatar" mode="aspectFit"></image>
			<view class="user-detail">
				<text>{{info.author.name}}</text>
			</view>
		</view>
		<text class="article-title">{{info.title}}</text>
		<image :src="info.cover" @tap="previewImg(info.cover)" class="article-cover" mode="heightFix"></image>
		<view class="article-content" v-html="info.content">

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {}
			}
		},
		onLoad(options) {
			let {
				articleId
			} = options
			if (articleId) {
				let info = getApp().globalData.articleList.find(item => item.id = articleId)
				this.info = info
				this.info = Object.assign({}, this.info)
				console.log(info)
			}
		},
		methods: {
			previewImg(url) {
				uni.previewImage({
					current: url,
					urls: [url]
				})
			}
		}
	}
</script>

<style>
	page {
		padding: 20rpx;
		background-color: #fff;
	}

	.article-page {
		width: 710rpx;
		display: flex;
		flex-direction: column;
		padding-bottom: 40rpx;
	}

	.user-info {
		display: flex;
		align-items: center;
	}

	.user-avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.article-title {
		font-weight: 600;
		line-height: 48rpx;
		padding: 20rpx 0;
	}

	.article-cover {
		width: 100%;
		height: 200rpx;
		margin: 0 auto 20rpx;
	}

	.article-content {
		white-space: pre-wrap;
		font-size: 28rpx;
	}
</style>
